<!-- text按钮 -->
<template>
  <div class="timer-box">
    <div
      class="timer-item"
      @click="checkedTimer(item)"
      :class="item.id == currentItem ? 'timer-current-item' : ''"
      v-for="item in timer"
      :key="item.id"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script type="text/javascript">
export default {
  name: "btn-data",
  data() {
    return {
      timer: [
        {
          id: "Day",
          label: "日",
        },
        {
          id: "Month",
          label: "月",
        },
        {
          id: "Year",
          label: "年",
        },
      ],
      currentItem: "Day",
    };
  },
  methods: {
    checkedTimer(item) {
      this.currentItem = item.id;
      this.$emit("BtnDataClick", item.id);
    },
  },
};
</script>

<style lang="less" scoped>
.timer-box {
  display: flex;
  background: #e9f3ff;
  text-align: center;
  padding: 3px;
  margin-left: 10px;
  height: 32px;
  border-radius: 16px;
  .timer-item {
    width: 33.33%;
    height: 26px;
    line-height: 26px;
    cursor: pointer;
    color: #1a85ff;
    border-radius: 13px;
  }
  .timer-current-item {
    background: #0052d9;
    color: #fff;
    border-radius: 13px;
  }
}
</style>
